<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML知识点总结</title>   
<body>
    <p>段落标签</p>

<!-- 水平线 -->
    <hr color="green" width="400px" size="50px" />
    <!-- color表示水平线颜色.width表示宽度.size表示高度.noshade纯色无阴影.alige表示对齐方式：默认居中,left向左,right向右 -->

 <!-- a表示超文本链接 -->    
    <a href="https://aka.ms/AnaheimRW/ad2-jingdong-cid117-pid3/sept24">
        <!-- href跳转地址， -->

<!-- 图片的引入 -->
        <img src="C:\Users\Dell\Desktop\OIP-C.jpg" width="200px"></a>
        <!-- img的属性:src表示路径(图片来源). alt表示图像代替文本. width图像宽度. height图像高度. title鼠标悬停在图片上给予提示 -->

<!-- 有序列表 -->
    <ol>
        <li>水果</li>
            <ol type="a">
                <li >西瓜</li>
                <li>香蕉</li>
            </ol>
        <li>蔬菜</li>
            <ol>
                <li>土豆</li>
                <li>辣椒</li>
            </ol>
    </ol>
<!-- 有序列表快捷键:ol>li*3.  ol的属性type="1.a.A.i.I."-->

<!-- 无序列表 -->
    <ul>
        <li>尚学堂</li>
        <ul type="square">
            <li>阿里</li>
            <li>京东</li>
        </ul>
        <li>学校</li>
        <ul type="disc">
            <li>北大</li>
            <li>清华</li>
        </ul>
    </ul>
<!-- 无序列表快捷键:ul>li*2. ul的属性type="disc实心圆,circle空心圆,square小方块,none不显示" -->

<!-- 滚动字幕 -->
<marquee behavior="slide">我不喜欢你</marquee>
<!-- 滚动字幕属性：behavior（跑马灯效果）：scroll滚动.slide滑动.alternate交替，bgcolor背景颜色，direction移动方向，scollamount每次移动距离，
 scrolldelay每次移动的延迟时间，truespeed速度，loop运算次数，height高度，width宽度，hspace左右空白宽度，vspace上下空白宽度 -->

<!-- 嵌入音视频文件-->
<embed scr="地址"></embed>
<!-- 属性：autostart下载完之后是否自动播放true.false,loop循环次数，hidden控制面板是否显示true.no，starttime音视频开始播放的时间
 volume音量大小：0--100 -->

<!-- 表格的基本结构 -->
<table border="2" width="400px" bgcolor="green">
    <caption>学生信息表</caption>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>16</th>
            <th>杨涛</th>
            <th>男</th>
        </tr>
    </tbody>
        <tfoot>
            <td colspan="3" align="center">表尾</td>
        </tfoot>
    </table>
<!-- th和td的作用相似 -->
<!-- caption表示表格的名称，显示在正上方 -->
<!-- thead是表头，tbody是表身，tfoot是表尾 -->
<!-- 表格基本属性：align对齐方式，border表格边框，bordercolor边框颜色，bgcolor背景颜色，background背景图片，cellspacing单元格之间的间距
 ，cellpadding内容与边框内边距，height高度，width宽度 -->

<table border="2">
    <tr>
        <td>我喜欢你</td>
        <td>我喜欢你</td>
    </tr>
    <tr>
        <td>我喜欢你</td>
        <td>我喜欢你</td>
    </tr>
    <tr>
        <td>我喜欢你</td>
        <td>我喜欢你</td>
    </tr>
</table>
<!-- 单元格快捷键:table>td*3>tr*2{文本}. 表格属性:border表格边框,width表格宽度,height表格高度 -->

<table border="">
    <tr >
        <td colspan="2">单元1.2</td>
        
    </tr>
    <tr>
        <td>单元三</td>
        <td rowspan="2">单元4.6</td>
    </tr>
    <tr>
        <td>单元五</td>
        
    </tr>
</table>
<!-- 水平合并：colspan，垂直合并：rowspan. 以左上为主 -->

<form>
    first name:<input type="text" name="firstname">
    <br>
    last name:<input type="password" name="pwd">
    <input type="submit" value="提交">
    <input type="reset">
    <!-- 表单元素：标签：input，表单域：type="text"，表单按钮：type="submit" -->
    <!--提交按钮：type="submit"  value换按钮名称  reset重置按钮-->
    <!--密码框：<input type="password">  -->
    <!--文本框：<input type="text">  -->
    

    <!-- 
    常见块级元素：div地址，form交互表单，h1~h6，hr水平分割线，p，table单元格，ul无序列表等
    特点：独占一行，自上向下垂直排列，可以设置width，height属性，一般块级元素可以包含行内元素和块级元素    
    常见内联元素：a,b,em,i,span,strong等
    特点：只占自身大小，设置width，height属性无效，一般内联元素包含内联元素，不包括块级元素
    行内块级元素(特点：不换行，能够识别宽高)：a锚点，abbr缩点，acronym首字，b粗体等
    -->

<!-- 表单 -->
<form action="reg.asp" method="post">
    选择一种你喜爱的水果：
    <br><input type="radio" name="sg" value="banana">香蕉
    <br><input type="radio" name="sg" value="apple">苹果
    <br><input type="radio" name="sg" value="orange">橙子
    <br>选择你所喜爱的运动：
    <br><input type="checkbox" name="ra1" value="football">足球
    <br><input type="checkbox" name="ra2" checked value="basketball">篮球
    <br><input type="checkbox" name="ra3" value="volleyball">排球
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重新输入">
</form>
<!-- 表单type属性：radio单选标志，checkbox复选框， -->

<!-- selcst -->
出生年：
    <select name="birthyear">
    <option value="1998">1998
    <option value="1999">1999
    <option value="2000" selected>2000
    <option value="2001">2001
    <option value="2002">2002
    <option value="2003">2003        
    <option value="2004">2004
    <option value="2005">2005
    </select><br>
<!-- option确定下拉列表选项 -->
</body>
</html>
<!-- 文字修饰标记 -->
<b>文本</b><!-- 加粗 -->
<i>文本</i><!-- 斜体 -->
<u>文本</u><!-- 下划线 -->
<s>文本</s><!-- 删除线 -->
<sup>文本</sup><!-- 上标 -->
<sub>文本</sub><!-- 下标 --><br>
<!-- 特殊字符 -->
&nbsp;<!-- 空格 -->
&lt;<!-- 小于号 -->
&gt;<!-- 大于号 -->
&amp;<!-- 和号 -->
&quot;<!-- 引号 -->
&apos;<!-- 撇号[IE不支持] -->
&cent;<!-- 分 -->
&pound;<!-- 镑 -->
&yen;<!-- 元 -->
&euro;<!-- 欧元 -->
&sect;<!-- 小节 -->
&copy;<!-- 版权 -->
&reg;<!-- 注册商标 -->
&trade;<!-- 商标 -->
&times;<!-- 乘号 -->
&divide;<!-- 除号 -->